<template>
  <div>
    <el-button
      @click="clickBtn"
      plain
      v-if="showStorageBtn"
      :disabled="showStorageBtn"
    >
      选择入库单
    </el-button>
    <el-button v-else @click="clickBtn" type="single-number" plain>
      选择入库单
    </el-button>
    <el-dialog
      :visible.sync="dialogTableVisibletextarea"
      custom-class="sorting-code-number"
      maxHeight="null"
      title="选择入库单"
      width="990px"
      :before-close="beforeClose"
    >
      <div class="el-dialog__body-header">
        <span class="title"></span>
        <el-search
          :formProp="formData"
          :showIndex="showIndex"
          @change="change"
          @search="search"
          placement="bottom-start"
          width="420px"
        >
          <template slot="search">
            <el-input
              clearable
              placeholder="请输入入库单名称模糊查询"
              searchLabel="入库单名称"
              v-model="formData.storageName"
            ></el-input>
            <el-input
              clearable
              placeholder="请输入入库单编号模糊查询"
              searchLabel="入库单编号"
              v-model="formData.storageCode"
            ></el-input>
            <el-input
              clearable
              placeholder="请输入填报单位模糊查询"
              searchLabel="填报单位"
              v-model="formData.reportInOrgName"
            ></el-input>
            <el-input
              clearable
              placeholder="请输入供应商模糊查询"
              searchLabel="供应商"
              v-model="formData.supplierName"
            ></el-input>
          </template>
        </el-search>
      </div>
      <div class="el-dialog__body-bodys">
        <div class="bodys-right">
          <el-table
            :data="tableData"
            :fit="true"
            :lineClamp="lineClampBody"
            maxHeight="390"
            style="width: 950px"
            @select="handleCheckChange"
            @select-all="handleCheckAllChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <template v-for="(table, index) in unfixedTableThead">
              <el-table-column
                :fixed="table.fixed || false"
                :key="index"
                :type="table.type"
                :label="table.label"
                :align="table.align || 'left'"
                :header-align="table.headerAlign || 'left'"
                :min-width="table.width"
                :prop="table.prop"
                :show-overflow-tooltip="true"
                border="true"
              >
              </el-table-column>
            </template>
            <!-- <el-table-column label="操作" width="70">
              <template slot-scope="scope" style="margin-top: -11px">
                <el-button
                  :class="scope.row.button === false ? '' : 'checked'"
                  @click="handleClick(scope.row)"
                  plain
                  size="mini"
                  type="single-number-filleted"
                  >{{ scope.row.button === false ? "选择" : "已选择" }}
                </el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <div class="table-footer" style="height: 30px">
            <div class="ccui-table-footer">
              <div id="ccui-paging">
                <el-pagination
                  :current-page="pageNoCode"
                  :page-size="pageSizeCode"
                  :pager-count="5"
                  :page-sizes="[10, 20, 50, 100, 200, 500]"
                  :total="totalNum"
                  @addCurrentPage="internalCurrentPage"
                  @current-change="handleCurrentChange"
                  @next-click="handleNext"
                  @prev-click="handlePrev"
                  @size-change="handleSizeChange"
                  background
                  layout="total,sizes, prev, pager, next, jumper"
                  next-text="下一页 >"
                  popper-class="ccui-paging-page-size-popper"
                  prev-text="< 上一页"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="default-mini" @click="handleFalse"
          >取 消</el-button
        >
        <el-button size="mini" type="primary-font-mini" @click="handleTrue"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listFinStoragePage } from "../api";
import { setSessionItem, getSessionItem, ishasAgentId } from "@/basa/utils";

export default {
  props: {
    basicForm: {
      type: Object
    },
    // reportInOrgId: {
    //   type: Number
    // },
    businessType: {
      type: String
    },
    showStorageBtn: {
      type: Boolean
    }
  },
  data() {
    return {
      reportInOrgId: 1,
      showIndex: 0,
      lineClampBody: true,
      tableData: [],
      searchData: [],
      treeProps: {
        label: "name",
        children: "zones",
        isLeaf: "leaf"
      },
      dialogTableVisibletextarea: false,
      formData: {
        storageCode: "", // 入库单编号
        storageName: "", // 入库单名称
        supplierName: "", // 供应商
        reportInOrgName: "" // 填报单位
      },
      textarea: "",
      formLabelWidth: "120px",
      pageSizeCode: 10,
      pageNoCode: 1,
      present: "",
      TableData: "",
      total: 0,
      totalNum: 0,
      lastTime: {
        button: false
      },
      pagesize: [5],
      unfixedTableThead: [
        { prop: "storageCode", label: "入库单编号", width: "90" },
        { prop: "storageName", label: "入库单名称", width: "90" },
        { prop: "reportInOrgName", label: "填报单位", width: "90" },
        { prop: "supplierName", label: "供应商", width: "120" },
        { prop: "warehouseName", label: "仓库", width: "120" },
        { prop: "storageCountNumAll", label: "数量", width: "90" },
        // { prop: "storageMoneyCountNumAll", label: "含税金额", width: "90" },
        { prop: "storageMoney", label: "含税金额", width: "90" },
        { prop: "storageType", label: "入库类型", width: "90" }
      ],
      settleCoder: ""
    };
  },
  created() {
    this.$bus.$on("settlementCoder", message => {
      this.settleCoder = message;
    });
  },
  methods: {
    beforeClose() {
      this.formData = {
        storageCode: "", // 入库单编号
        storageName: "", // 入库单名称
        supplierName: "", // 供应商
        reportInOrgName: "" // 填报单位
      };
      this.pageNoCode = 1;
      this.dialogTableVisibletextarea = false;
    },
    handleCheckChange(val) {
      this.TableData = val;
      console.log(this.TableData);
    },
    handleCheckAllChange(val) {
      this.TableData = val;
      console.log(this.TableData);
    },
    handleTrue() {
      this.$emit("inventoryConfirm", this.TableData);
      this.TableData = [];
      this.dialogTableVisibletextarea = false;
    },
    handleFalse() {
      this.TableData = [];
      this.dialogTableVisibletextarea = false;
    },
    clickBtn() {
      // this.tableData = []
      // this.TableData = []
      // this.settleCoder = ''
      // this.pageNo = 1
      if (this.basicForm != null && this.basicForm.reportInOrgId != null) {
        this.reportInOrgId = this.basicForm.reportInOrgId;
      }
      if (this.basicForm.settlementId == null) {
        // this.$message({
        //   message: ,
        //   type: "error",
        //   showClose: true,
        //   ccuiCustom: true
        // });
        this.$showErrorMessage("请选择结算单");
        return;
      }
      if (this.reportInOrgId && this.reportInOrgId != "") {
        this.dialogTableVisibletextarea = true;
        this.getList();
      } else {
        // this.$message({
        //   message: ,
        //   type: "error",
        //   showClose: true,
        //   ccuiCustom: true
        // });
        this.$showErrorMessage("请先选择填报单位");
      }
    },
    inventoryConfirm() {
      this.dialogTableVisibletextarea = false;
      // alert(JSON.stringify(this.TableData));
      this.$emit("inventoryConfirm", this.TableData);
    },
    getList(reqObj) {
      let obj = {
        // ...this.formData,
        // pageNo: this.pageNoCode,
        // pageSize: this.pageSizeCode,
        // storageStatus: "5",
        // reportInOrgId: this.reportInOrgId,
        // settlementId:this.settleCoder,
        // isInvoiced:0,
        // storageType:1
      };
      obj = typeof reqObj == "object" ? reqObj : obj;
      obj.pageNo = this.pageNoCode;
      obj.pageSize = this.pageSizeCode;
      // obj.businessType = this.businessType;
      obj.businessType = this.basicForm.invoicetype;

      // obj.storageStatus = "5";
      // obj.reportInOrgId = this.reportInOrgId;
      // obj.settlementId = this.settleCoder
      obj.ids = [this.settleCoder];
      // obj.isInvoiced = 0
      // obj.storageType = 1
      listFinStoragePage(obj).then(res => {
        this.tableData = res.data.data.rows;
        this.totalNum = res.data.data.recordsTotal;
        this.total = res.data.data.total;
        this.pageNoCode = res.data.data.pageNo; // 当前页
        this.tableData.map(e => {
          e.storageType = e.storageType == 1 ? "财务入库" : "财务暂估入库";
          e.storageCountNumAll = e.storageCount;
          e.storageCountNumAll = e.storageCountNumAll
            ? e.storageCountNumAll.toFixed(3)
            : "";
          e.storageMoneyCountNumAll = e.storageMoney;
          e.storageMoneyCountNumAll = e.storageMoneyCountNumAll
            ? e.storageMoneyCountNumAll.toFixed(2)
            : "";
          e.storageMoney = e.storageMoney ? e.storageMoney.toFixed(2) : "";
          e.button = false;
          if (this.TableData.id === e.id) {
            e.button = true;
          }
        });
      });
    },
    handleClick(val) {
      this.TableData = val;
      val.button = true;
      if (val.id !== this.lastTime.id) {
        this.lastTime.button = false;
        this.lastTime = val;
      }
      this.tableData = [...this.tableData];
      this.dialogTableVisibletextarea = false;
      //   this.$emit("inventoryConfirm", val);
      this.$emit("inventoryConfirm", this.TableData);
    },
    handleSizeChange(val) {
      this.pageNoCode = 1;
      if (val !== "none") {
        this.pageSizeCode = val;
        setSessionItem("pageSize", this.tableName, val);
      }
      this.getList(this.formDataSearch);
    },
    handleNodeClick(val) {
      this.$refs.tree.setCheckedKeys([]);
      this.$refs.tree.setCheckedKeys([val.id]);
    },
    handleCurrentChange(val) {
      let searchFormData = getSessionItem("pageNo", this.tableName) || {};
      setSessionItem("pageNo", this.tableName, {
        pageNo: val,
        searchForm: searchFormData.searchForm || {}
      });
      this.formDataSearch = {
        ...this.formDataSearch,
        ...searchFormData.searchForm
      };
      // 跳转翻页都会调这个方法
      this.pageNoCode = val;
      this.getList(this.formDataSearch);
    },
    internalCurrentPage(val) {
      val = 10;
    },
    handlePrev() {},
    handleNext() {},
    handleGoPage() {},
    search(searchData) {
      this.pageNoCode = 1;
      this.formDataSearch = searchData;
      this.localSearchData = JSON.parse(JSON.stringify(searchData));
      setSessionItem("pageNo", this.tableName, {
        pageNo: this.pageNoCode,
        searchForm: this.localSearchData
      });
      console.log("121212121", this.formDataSearch);
      this.getList(this.formDataSearch);
    },
    change(index, key, value) {
      this.showIndex = index;
    }
  },
  beforeRouteLeave(to, from, next) {
    for (var key in this.$vnode.parent.parent.componentInstance.cache) {
      delete this.$vnode.parent.parent.componentInstance.cache[
        ishasAgentId(to.path, key)
      ];
    }
    next();
  },
  activated() {
    this.settleCoder = "";
    this.basicForm.settlementId = null;
    this.TableData = [];
    this.formData.storageCode = "";
    this.formData.storageName = "";
    this.formData.supplierName = "";
    this.formData.reportInOrgName = "";
  }
};
</script>
<style lang="scss" scoped>
// /deep/ .el-searchs-right > .el-input {
//   width: 200px;
// }
/deep/ .el-input .el-pagination__editor .is-in-pagination {
  width: 80px !important;
}
/deep/ .el-dialog__header {
  display: flex;
}
/deep/ .el-dialog__header .el-dialog__title {
  margin-top: 10px;
}
</style>
